<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<test1></test1>
			<test2></test2>
			<button type="button" @click="handle">销毁事件</button>
		</div>
		<script src="./js/vue-2.5.16.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue()
			Vue.component("test1",{
				data(){
					return{
						num:0
					}
				},
				template:`
				<div>
				<div>one:{{num}}</div>
				<button @click="handle">点击</button>
				</div>
				`,
				methods:{
					handle:function(){
						vm.$emit("test2-evt", 1)
					}
				},
				mounted:function(){
					//监听事件
					vm.$on("test1-evt",(val)=>{
						this.num += val
					})
				}
			})
			Vue.component("test2",{
				data(){
					return{
						num:0
					}
				},
				template:`
				<div>
				<div>two:{{num}}</div>
				<button @click="handle">点击</button>
				</div>
				`,
				methods:{
					handle:function(){
						vm.$emit("test1-evt", 2)
					}
				},
				mounted:function(){
					vm.$on("test2-evt",(val)=>{
						this.num += val
					})
				}
			})
			var ap = new Vue({
				el:"#app",
				data:{},
				methods:{
					handle:function(){
						//销毁事件
						vm.$off("test1-evt")
						vm.$off("test2-evt")
					}
				}
			})
		</script>
	</body>
</html>
